<template>
  <el-form :model="tableCol">
    <el-col
      :span="22"
      class="el-col-offset-2 relative"
    >
      <el-input
        v-model="tableCol.val"
        clearable
        :disabled="type===3?true:false"
        @change="changeValue"
      />
      <el-button v-show="type!==3" type="danger" size="mini" class="input-delete" circle icon="el-icon-close" @click="deleteItem" />

    </el-col>
  </el-form>
</template>

<script>
export default {
  name: 'ExtraSpecValue',
  props: {
    index: {
      type: Number,
      required: true
    },
    tableCol: {
      type: Object,
      required: true
    },
    type: {
      type: Number,
      required: true
    }
  },
  methods: {
    changeValue() {
      const vm = this
      vm.$emit('changeItemValue')
    },
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
    }
  }
}
</script>

<style lang="scss" scoped>
.relative{
  position: relative;
  .input-delete{
    position: absolute;
    top:-33%;
    left:88%;
  }
}
</style>
